﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="screen-orientation" content="portrait" />
		<meta name="x5-orientation" content="portrait" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="msapplication-tap-highlight" content="no" />
		<link rel="stylesheet" href="../../js/plugins/element-ui/element-ui.css">
		<link rel="stylesheet" href="../../css/common.css">
		<link rel="stylesheet" href="../../css/admin/index.css">
	</head>

	<body>
		
		<div id="database">
		    <div class="block">
		    <el-date-picker
		      v-model="value2"
		      align="right"
		      type="date"
		      placeholder="选择备份时间"
		      :picker-options="pickerOptions1">
		    </el-date-picker>
		    <el-button type="primary" v-on:click="addMessage">备份</el-button>
		  </div>
		  
		  <table class="u-table" cellpadding="0" cellspacing="0">
			  <tr>
			    <th>序号</th>
			     <th>占用空间</th>
			    <th>编码</th>
			    <th>使用状态</th>
			    <th>备份时间</th>
			     <th>操作</th>
			  </tr>
			  <tr v-cloak v-for="(item,index) in list">
			    <td>{{item.id}}</td>
			    <td>{{item.userName}}</td>
			    <td>{{item.mobile}}</td>
			    <td>
			    <p v-if='item.isUse'>成功</p>
			    <p v-else class="red">失败</p>
			    </td> 
			    <td>{{item.lastactivitydate}}</td>
			    <td>
			    	  <a href="javascript:void(0);" v-on:click="startEdit(index)">还原</a>
			    	   <a href="javascript:void(0);" v-on:click="startEdit(index)">下载</a>
					  <a class="red" href="javascript:void(0);" v-on:click="remove(index)">删除</a>
			    </td>
			  </tr>
			</table>
			   <div class="page-bar">
				  <ul>
				    <li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页</a></li>
				    <li v-if="cur==1"><a class="banclick">上一页</a></li>
				    <li v-if="cur>=num-1"><a v-on:click="btnClick(1)">1</a></li>
				    <li v-if="cur>=num"><a>...</a></li>
				    <li v-sele v-for="index in indexs" v-bind:class="{'active': cur == index}">
				      <a v-on:click="btnClick(index)">{{ index }}</a>
				    </li>
				    <li v-if="cur>=num && cur<=all-num"><a>....</a></li>
				    <li v-if="cur>=num && cur<=all-num+2"><a v-on:click="btnClick(all)">{{all}}</a></li>
				    <li v-if="cur!=all"><a v-on:click="cur++,pageClick()">下一页</a></li>
				    <li v-if="cur == all"><a class="banclick">下一页</a></li>
				    <li><a>共<i>{{all}}</i>页</a></li>
				  </ul>
			 </div>

		  
		 
		</div>
		
		
		
		<script type="text/javascript" src="../../js/plugins/vue/vue.min.js"></script>
		<script type="text/javascript" src="../../js/plugins/element-ui/element-ui.js"></script>
		<script type="text/javascript" src="../../js/plugins/jQuery/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="../../js/plugins/vue-router/vue-router.min.js"></script>
		<script type="text/javascript" src="../../js/util/util.js"></script>
		<script type="text/javascript" src="../../js/admin/main.js"></script>
		<script>
			
		var database = new Vue({
			  el: '#database',
			  data: {
			  	    all:100, //总页数
			        cur: 1,//当前页码
			        row:100,//显示多条数据
			        num:5, //显示多少页码
			        nowEditCol:-1,//当前编辑的行
                    editStatus:false,//当前是否在编辑状态
				    list:[
 					    {
					        "id": "1",
					        "userName": "340 B",
					        "mobile": "utf8_general_ci",
					        "isUse":true,
					        "lastactivitydate": "2017-06-09"
					    },
					     {
					        "id": "1",
					        "userName": "340 B",
					        "mobile": "utf8_general_ci",
					        "isUse":true,
					        "lastactivitydate": "2017-06-09"
					    },
					     {
					        "id": "1",
					        "userName": "340 B",
					        "mobile": "utf8_general_ci",
					        "isUse":true,
					        "lastactivitydate": "2017-06-09"
					    },
					    {
					        "id": "1",
					        "userName": "340 B",
					        "mobile": "utf8_general_ci",
					        "isUse":true,
					        "lastactivitydate": "2017-06-09"
					    },
					    {
					        "id": "1",
					        "userName": "340 B",
					        "mobile": "utf8_general_ci",
					        "isUse":true,
					        "lastactivitydate": "2017-06-09"
					    },
					      {
					        "id": "1",
					        "userName": "340 B",
					        "mobile": "utf8_general_ci",
					        "isUse":true,
					        "lastactivitydate": "2017-06-09"
					    },
					     {
					        "id": "1",
					        "userName": "340 B",
					        "mobile": "utf8_general_ci",
					        "isUse":true,
					        "lastactivitydate": "2017-06-09"
					    },
					 {
					        "id": "1",
					        "userName": "340 B",
					        "mobile": "utf8_general_ci",
					        "isUse":true,
					        "lastactivitydate": "2017-06-09"
					    },
					  {
					        "id": "1",
					        "userName": "340 B",
					        "mobile": "utf8_general_ci",
					        "isUse":true,
					        "lastactivitydate": "2017-06-09"
					    },
					    {
					        "id": "1",
					        "userName": "340 B",
					        "mobile": "utf8_general_ci",
					        "isUse":true,
					        "lastactivitydate": "2017-06-09"
					    },
					],
			      value2: '',
			      pickerOptions1: {
			          shortcuts: [{
			            text: '今天',
			            onClick(picker) {
			              picker.$emit('pick', new Date());
			            }
			          }, {
			            text: '昨天',
			            onClick(picker) {
			              const date = new Date();
			              date.setTime(date.getTime() - 3600 * 1000 * 24);
			              picker.$emit('pick', date);
			            }
			          }, {
			            text: '一周前',
			            onClick(picker) {
			              const date = new Date();
			              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
			              picker.$emit('pick', date);
			            }
			          }]
			        }
			  },
              computed:{
				  	indexs: function(){ //分页
				     var left = 1;
				     var right = this.all;
				     var ar = [];
				     if(this.all>= this.num){
				      if(this.cur > 3 && this.cur < this.all-2){
				          left = this.cur - 2
				          right = this.cur + 2
				      }else{
				        if(this.cur<=3){
				          left = 1
				          right = this.num
				        }else{
				          right = this.all
				          left = this.all -4
				        }
				      }
				     }
				    while (left <= right){
				      ar.push(left)
				      left ++
				    }
				    return ar
				    }
				  },
			  methods: {
			    addMessage: function () {
			      Ajax('/classification-service/classification',{"id":2},function(data){
			      	  console.log(data)
			      });
			    },
			    btnClick: function(data){//页码点击事件
					      if(data != this.cur){
					        this.cur = data 
					        this.$options.methods.__ajax.bind(this)(this.cur); //调用AJAX
					      }
					     
					    },
			    pageClick: function(){ //点击上一页下一页
			      console.log('现在在'+this.cur+'页');
			      this.$options.methods.__ajax.bind(this)(this.cur); //调用AJAX
			    },
			    remove:function(index){ //删除
					    	 this.list.splice(index,1);
					    }
			  }
			})	
			
</script>
		
		
	</body>

</html>